<template>
  <div class="issue">
    <el-row>
        <h1>发表文章</h1>
        <button @click="showmsg">--</button>
    </el-row>

   <el-row>
     <div class="titlestyle">     
      <el-input placeholder="请输入标题" v-model="title" class="input-with-select">
        <el-button slot="append" icon="el-icon-thumb" @click="open">发表</el-button>
      </el-input>  
    </div>
   </el-row>

    <el-row>
      <div class="inputtype"> 
    <el-input  placeholder="请输入内容" v-model="type">

      <template slot="prepend">
      <el-dropdown @command='handleCommand' > 
      <span class="el-dropdown-link">
        选择分类<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="前端">前端</el-dropdown-item>
      <el-dropdown-item command="后端">后端</el-dropdown-item>
      <el-dropdown-item command="移动端">移动端</el-dropdown-item>
      <el-dropdown-item command="生活感悟">生活感悟</el-dropdown-item>
      <el-dropdown-item divided command="其他">其他</el-dropdown-item>
    </el-dropdown-menu>
      </el-dropdown>
      </template>

    </el-input>
    
    </div>
    
    </el-row>
   <el-row>
    <!-- <h1>{{text}}</h1> -->
    <v-md-editor v-model="text" height="500px" class="myeditor"></v-md-editor>
   </el-row>
   
  </div>
</template>

<script>
export default {
    name:"issue",
    components:{
     
    },
    data(){
      return {
        title:'',
        text:'',//文本内容
        type:'',
        issend: false,//是否发表
        //类型
        value: [],
        options:[
          {value: 'zhinan',
          label: '指南',children:[]
          },
           {value: 'zhinan',
          label: '指北',children:[]
          },
          ]
      }
     
    },
    methods:{
      async insertdata(){
        return await this.axios.get("/article/add",{
            params: {
              title: this.title,
              content: this.text,
              type: this.type,
              uid: this.$store.state.logininfo.id
              },
          });
      },
      handleCommand(command){
          this.$message('click on item ' + command);
          this.type=command
      },
      open() {
        this.$confirm('是否确定提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.issend=true;
          const res = this.insertdata();
          res.then( res =>{
            console.log(res);
          })
          console.log(data);
          if(data.data.status != 500){
            this.$message({
              type: 'success',
              message: '发表成功!'
            });
            this.$router.push('/show')
          }else{
            this.$message(
              {type: 'info',
            message: '失败！'}
            )
          }
          console.log(this.issend);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'weizhi'
          });  
          console.log(this.issend);        
        });
      },
      showmsg(){
      console.log(this.$store.state);
      }
    },
    created(){
      console.log(this.$store.state);
    }
}
</script>

<style>
.input-with-select{
  width: 100%;
  margin-bottom: 20px;
}
.myeditor{
  margin-bottom: 20px;
}
.mytabs{
  height: 300px;
  width: 500px;
}
.inputtype{
  margin-bottom: 20px;
  width: 50%;
}
.titlestyle{
  margin-top: 15px;
  width: 50%;
}
</style>